import { defineStore } from "pinia"
import { useTheme } from '@hooks/useTheme'
import { THEMEMAP, defaultTheme } from "@/config"
import {useLocalStorage} from "@/hooks/useLocalStorage"
import {unref} from "vue"
interface themeState {
  theme: keyof typeof THEMEMAP
}

const { state: localTheme } = useLocalStorage('theme')
const themeStore = defineStore('themeStore', {
  state: () :themeState => {
    return {
      theme: String(unref(localTheme) || defaultTheme) as unknown as keyof typeof THEMEMAP
    }
  },
  getters: {
    getTheme () : keyof typeof THEMEMAP  {
      return this.theme
    }
  },
  actions: {
    changeTheme (newTheme :keyof typeof THEMEMAP) {
      this.theme = newTheme
      const { replaceTheme } = useTheme()
      replaceTheme(this.theme)
    }
  },
})

export default themeStore